/* 启动界面样式 */
.start-screen {
    position: fixed; /* 定位为固定位置 */
    z-index: 999; /* 确保在最上层 */
    left: 0; top: 0; right: 0; bottom: 0; /* 覆盖整个窗口 */
    background: url('image2.jpg') no-repeat center center fixed; /* 设置背景图片 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中对齐 */
    justify-content: center; /* 垂直居中对齐 */
    animation: fadeIn 1s; /* 淡入动画 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 移除 ::before 伪元素，因为用户要求不改变背景 */
/* @keyframes fadeIn 定义淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; } /* 初始状态：完全透明 */
    to   { opacity: 1; } /* 最终状态：完全不透明 */
}

/* 启动标题区域样式 */
.start-title {
    text-align: center; /* 文本居中 */
    margin-bottom: 24px; /* 下边距 */
}

/* Pac-Man 表情样式 */
.pacman-emoji {
    font-size: 3em; /* 设置字体大小 */
    display: block; /* 作为块级元素显示 */
    animation: pacman-bounce 1.2s infinite alternate; /* 应用上下弹跳动画 */
}

/* 定义 Pac-Man 弹跳动画 */
@keyframes pacman-bounce {
    0% { transform: translateY(0); } /* 起始位置 */
    100% { transform: translateY(-12px); } /* 弹起高度 */
}

/* 启动标题样式 */
.start-title h1 {
    color: #ffe066; /* 文字颜色 */
    font-size: 2.8em; /* 字体大小 */
    margin: 0; /* 移除默认外边距 */
    letter-spacing: 3px; /* 字符间距 */
    text-shadow: 0 4px 20px #23243a, /* 文字阴影 */
                 0 0 40px #ffe066aa;
}

/* 副标题样式 */
.start-title .subtitle {
    color: #fffbe6; /* 文字颜色 */
    font-size: 1.3em; /* 字体大小 */
    margin-top: 8px; /* 上边距 */
    letter-spacing: 1.5px; /* 字符间距 */
    text-shadow: 0 2px 10px #23243a; /* 文字阴影 */
}

/* 启动表单样式 */
.start-form {
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中对齐 */
    background: rgba(44,62,80,0.95); /* 半透明背景 */
    padding: 36px 54px 30px 54px; /* 内边距 */
    border-radius: 20px; /* 圆角边界 */
    box-shadow: /* 多层阴影效果 */ 
        0 8px 40px 12px #ffe066cc,
        0 10px 40px 0 #23243a99;
    border: 3px solid #ffe066; /* 边框样式 */
    animation: popIn 0.8s cubic-bezier(.68,-0.55,.27,1.55); /* 弹出动画 */
    position: relative; /* 相对定位 */
    z-index: 1; /* 确保在背景之上 */
}

/* 弹出动画定义 */
@keyframes popIn {
    0% { transform: scale(0.7); opacity: 0; } /* 初始状态：缩小且透明 */
    80% { transform: scale(1.05); opacity: 1; } /* 中间状态：轻微放大 */
    100% { transform: scale(1); } /* 最终状态：正常大小 */
}

/* 玩家名称输入框样式 */
#startNameInput {
    border-radius: 10px; /* 圆角边界 */
    border: 3px solid #ffe066; /* 边框样式 */
    padding: 14px 26px; /* 内边距 */
    font-size: 1.4em; /* 字体大小 */
    margin-bottom: 20px; /* 下边距 */
    outline: none; /* 移除焦点轮廓 */
    background: #fffbe6ee; /* 背景颜色 */
    color: #23243a; /* 文字颜色 */
    font-weight: bold; /* 加粗字体 */
    box-shadow: 0 4px 16px #ffe06666; /* 阴影效果 */
    transition: border 0.2s, box-shadow 0.2s; /* 过渡效果 */
}

/* 输入框焦点样式 */
#startNameInput:focus {
    border: 3px solid #a020f0; /* 改变边框颜色 */
    box-shadow: 0 0 20px #a020f099; /* 改变阴影颜色 */
}

/* 开始按钮样式 */
#startBtn {
    background: linear-gradient(90deg, #ffe066 60%, #ffd700 100%); /* 渐变背景 */
    color: #23243a; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 14px; /* 圆角边界 */
    padding: 14px 44px; /* 内边距 */
    font-size: 1.4em; /* 字体大小 */
    font-weight: bold; /* 加粗字体 */
    margin-top: 18px; /* 上边距 */
    cursor: pointer; /* 指针样式 */
    box-shadow: 0 6px 20px #ffe066aa; /* 阴影效果 */
    transition: background 0.2s, transform 0.1s; /* 过渡效果 */
    letter-spacing: 2px; /* 字符间距 */
}

/* 按钮悬停样式 */
#startBtn:hover {
    background: linear-gradient(90deg, #ffd700 60%, #ffe066 100%); /* 改变渐变方向 */
    transform: scale(1.05); /* 轻微放大 */
}

/* 启动提示样式 */
.start-tip {
    color: #ffe066; /* 文字颜色 */
    font-size: 1.1em; /* 字体大小 */
    margin-top: 10px; /* 上边距 */
    letter-spacing: 1.2px; /* 字符间距 */
    text-shadow: 0 0 10px #23243a; /* 文字阴影 */
}

/* 启动页脚样式 */
.start-footer {
    margin-top: 40px; /* 上边距 */
    color: #ffe066; /* 文字颜色 */
    font-size: 1.1em; /* 字体大小 */
    letter-spacing: 1.2px; /* 字符间距 */
    text-shadow: 0 0 10px #23243a; /* 文字阴影 */
}

/* 页面主体样式 */
body {
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中对齐 */
    background: url('image.jpg') no-repeat center center fixed; /* 设置背景图片 */
    background-size: cover; /* 背景图片覆盖整个容器 */
    color: white; /* 文字颜色 */
    font-family: 'Arial Rounded MT Bold', Arial, sans-serif; /* 字体 */
    margin: 0; /* 移除默认外边距 */
    min-height: 100vh; /* 最小高度为视口高度 */
    padding: 0; /* 移除默认内边距 */
}

/* 页面头部样式 */
.header {
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中对齐 */
    margin-top: 10px; /* 上边距 */
    margin-bottom: 6px; /* 下边距 */
}

/* 副标题样式 */
.subtitle {
    color: #ffe066; /* 文字颜色 */
    font-size: 1em; /* 字体大小 */
    margin-bottom: 4px; /* 下边距 */
    letter-spacing: 1px; /* 字符间距 */
}

/* 关卡选择高亮区域样式 */
.level-select-highlight {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    justify-content: center; /* 水平居中对齐 */
    background: linear-gradient(90deg, #ffe066 60%, #ffd700 100%); /* 渐变背景 */
    border-radius: 16px; /* 圆角边界 */
    padding: 12px 28px; /* 内边距 */
    margin: 18px auto; /* 上下边距，水平居中 */
    box-shadow: 0 0 16px 2px #ffe06688; /* 阴影效果 */
    font-size: 1.25em; /* 字体大小 */
    font-weight: bold; /* 加粗字体 */
    color: #23243a; /* 文字颜色 */
    letter-spacing: 2px; /* 字符间距 */
    width: 200px; /* 宽度 */
}

/* 关卡选择标签样式 */
.level-select-highlight label {
    color: #23243a; /* 文字颜色 */
    font-size: 0.8em; /* 字体大小 */
    font-weight: bold; /* 加粗字体 */
    margin-right: 12px; /* 右边距 */
}

/* 关卡选择下拉菜单样式 */
.level-select-highlight select {
    font-size: 0.7em; /* 字体大小 */
    border-radius: 5px; /* 圆角边界 */
    border: 2px solid #ffe066; /* 边框样式 */
    padding: 4px 16px; /* 内边距 */
    background: #fffbe6; /* 背景颜色 */
    color: #23243a; /* 文字颜色 */
    font-weight: bold; /* 加粗字体 */
    outline: none; /* 移除焦点轮廓 */
    transition: border 0.2s; /* 过渡效果 */
}

/* 关卡选择下拉菜单焦点样式 */
.level-select-highlight select:focus {
    border: 2px solid #a020f0; /* 改变边框颜色 */
}

/* 游戏规则区域样式 */
.game-rules {
    background: rgba(52,73,94,0.92); /* 半透明背景 */
    padding: 8px 14px; /* 内边距 */
    border-radius: 10px; /* 圆角边界 */
    width: 560px; /* 宽度 */
    margin: 0 0 20px 0; /* 外边距 */
    line-height: 1.3; /* 行高 */
    font-size: 0.95em; /* 字体大小 */
    box-shadow: 0 2px 8px 0 #1a1a2e; /* 阴影效果 */
}

/* 玩家信息区域样式 */
.player-info {
    margin: 8px 0; /* 上下边距 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐 */
    gap: 8px; /* 元素间距 */
    justify-content: center; /* 水平居中对齐 */
}

/* 玩家名称输入框样式 */
#playerNameInput {
    border-radius: 6px; /* 圆角边界 */
    border: 1px solid #ffe066; /* 边框样式 */
    padding: 4px 8px; /* 内边距 */
    font-size: 1em; /* 字体大小 */
}

/* 玩家名称按钮样式 */
#playerNameBtn {
    background: #ffe066; /* 背景颜色 */
    color: #23243a; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 6px; /* 圆角边界 */
    padding: 4px 12px; /* 内边距 */
    font-weight: bold; /* 加粗字体 */
    cursor: pointer; /* 指针样式 */
    transition: background 0.2s; /* 过渡效果 */
}

/* 玩家名称按钮悬停样式 */
#playerNameBtn:hover {
    background: #ffd700; /* 改变背景颜色 */
}

/* 游戏容器样式 */
.game-container {
    background: rgba(44,62,80,0.92); /* 半透明背景 */
    padding: 14px 0 10px 0; /* 内边距 */
    border-radius: 18px; /* 圆角边界 */
    box-shadow: /* 多层阴影效果 */
        0 0 40px 8px #1a1a2e,
        0 0 0 4px #ffe066 inset;
    margin: 0 0 8px 0; /* 外边距 */
    width: 640px; /* 宽度 */
    position: relative; /* 相对定位 */
    display: flex; /* 使用弹性布局 */
    flex-direction: column; /* 垂直排列子元素 */
    align-items: center; /* 水平居中对齐 */
}

/* 游戏信息区域样式 */
.game-info {
    background: rgba(34,40,49,0.85); /* 半透明背景 */
    padding: 6px 16px; /* 内边距 */
    border-radius: 8px; /* 圆角边界 */
    font-size: 1em; /* 字体大小 */
    margin: 0 0 8px 0; /* 外边距 */
    display: flex; /* 使用弹性布局 */
    gap: 16px; /* 元素间距 */
    width: 560px; /* 宽度 */
    align-items: center; /* 垂直居中对齐 */
    box-shadow: 0 2px 8px 0 #1a1a2e; /* 阴影效果 */
    justify-content: center; /* 水平居中对齐 */
}

/* 游戏画布样式 */
#gameCanvas {
    border: 4px solid #ffe066; /* 边框样式 */
    border-radius: 12px; /* 圆角边界 */
    background: #23243a; /* 背景颜色 */
    width: 560px; /* 宽度 */
    height: 420px; /* 高度 */
    display: block; /* 作为块级元素显示 */
    box-shadow: /* 多层阴影效果 */
        0 0 30px 0 #ffe066,
        0 0 0 8px #23243a inset;
    margin: 0 auto; /* 水平居中 */
}

/* 游戏提示区域样式 */
.tips {
    margin-top: 6px; /* 上边距 */
    color: #ffe066; /* 文字颜色 */
    font-size: 0.95em; /* 字体大小 */
    text-align: left; /* 文本左对齐 */
    width: 560px; /* 宽度 */
}

/* 提示信息区域样式 */
#tipMsg {
    font-size:1.1em; /* 字体大小 */
    margin:6px 0; /* 上下边距 */
    color: #ffe066; /* 文字颜色 */
    min-height:24px; /* 最小高度 */
    opacity:0; /* 初始透明度 */
    transition:opacity 0.5s; /* 过渡效果 */
    text-align: center; /* 文本居中 */
}

/* 分数图表区域样式 */
#scoreChart {
    background: linear-gradient(135deg, #23243a 60%, #34495e 100%); /* 渐变背景 */
    border-radius: 14px; /* 圆角边界 */
    box-shadow: /* 多层阴影效果 */
        0 0 24px 4px #ffe066,
        0 2px 8px 0 #1a1a2e;
    margin: 12px auto; /* 上下边距，水平居中 */
    width: 560px; /* 宽度 */
    height: 300px; /* 高度 */
    border: 3px solid #ffe066; /* 边框样式 */
    position: relative; /* 相对定位 */
    transition: box-shadow 0.3s; /* 过渡效果 */
}

/* 分数图表悬停效果 */
#scoreChart:hover {
    box-shadow: /* 改变阴影效果 */
        0 0 40px 8px #ffe066,
        0 2px 8px 0 #1a1a2e;
}

/* 排行榜样式 */
.leaderboard {
    background:rgba(52,73,94,0.92); /* 半透明背景 */
    border-radius:8px; /* 圆角边界 */
    padding:8px; /* 内边距 */
    color:#ffe066; /* 文字颜色 */
    width:320px; /* 宽度 */
    margin:10px auto; /* 上下边距，水平居中 */
    list-style: none; /* 移除列表样式 */
}

/* 排行榜项样式 */
.leaderboard li {
    cursor:pointer; /* 指针样式 */
    margin:2px 0; /* 上下边距 */
    font-size: 1em; /* 字体大小 */
    transition: background 0.2s; /* 过渡效果 */
    padding: 2px 6px; /* 内边距 */
}

/* 排行榜样项悬停样式 */
.leaderboard li:hover {
    background: #ffe06633; /* 改变背景颜色 */
}

/* 图表类型按钮样式 */
#chartTypeBtn {
    background: #ffe066; /* 背景颜色 */
    color: #23243a; /* 文字颜色 */
    border: none; /* 无边框 */
    border-radius: 6px; /* 圆角边界 */
    padding: 4px 12px; /* 内边距 */
    font-weight: bold; /* 加粗字体 */
    cursor: pointer; /* 指针样式 */
    display: block; /* 作为块级元素显示 */
    margin: 10px auto; /* 上下边距，水平居中 */
    transition: background 0.2s; /* 过渡效果 */
}

/* 图表类型按钮悬停样式 */
#chartTypeBtn:hover {
    background: #ffd700; /* 改变背景颜色 */
}

/* 页脚样式 */
.footer {
    margin-top: 10px; /* 上边距 */
    color: #ffe066; /* 文字颜色 */
    font-size: 0.95em; /* 字体大小 */
    letter-spacing: 1px; /* 字符间距 */
    text-align: center; /* 文本居中 */
    text-shadow: 0 0 8px #23243a; /* 文字阴影 */
}
/* 关卡完成弹窗 */
.popup {
    /* 弹窗的定位和大小设置 */
    position: fixed; /* 固定定位，使弹窗相对于浏览器窗口定位 */
    top: 0; /* 位于窗口顶部 */
    left: 0; /* 位于窗口左侧 */
    width: 100%; /* 宽度为窗口的100% */
    height: 100%; /* 高度为窗口的100% */
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景，增强弹窗的突出效果 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐内容 */
    align-items: center; /* 垂直居中对齐内容 */
    z-index: 1000; /* 设置层叠顺序，使弹窗位于顶部 */
}

.popup.hidden {
    /* 隐藏弹窗的样式 */
    display: none; /* 隐藏元素 */
}

.popup-content {
    /* 弹窗内容区域的样式 */
    background: linear-gradient(135deg, #23243a 60%, #34495e 100%); /* 渐变背景色 */
    border-radius: 16px; /* 圆角边框 */
    border: 4px solid #ffe066; /* 边框样式：宽度、样式和颜色 */
    box-shadow: 0 0 30px #ffe066; /* 添加阴影效果：位置、模糊半径和颜色 */
    overflow: hidden; /* 隐藏超出内容区域的部分 */
    width: 400px; /* 宽度设置 */
    max-width: 90%; /* 最大宽度限制，适应不同屏幕尺寸 */
    animation: popupAnim 0.5s; /* 应用弹窗动画 */
}

@keyframes popupAnim {
    /* 定义弹窗动画 */
    from { transform: scale(0.7); opacity: 0; } /* 初始状态：缩小且透明 */
    to { transform: scale(1); opacity: 1; } /* 最终状态：正常大小且不透明 */
}

.popup-header {
    /* 弹窗头部样式 */
    background: linear-gradient(90deg, #ffe066 60%, #ffd700 100%); /* 水平渐变背景 */
    padding: 16px; /* 内边距设置 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐内容 */
    justify-content: center; /* 水平居中对齐内容 */
    gap: 12px; /* 元素之间的间距 */
}

.popup-emoji {
    /* 弹窗表情符号的样式 */
    animation: spin 2s infinite linear; /* 无限循环的旋转动画 */
}

@keyframes spin {
    /* 定义旋转动画 */
    from { transform: rotate(0deg); } /* 初始角度 */
    to { transform: rotate(360deg); } /* 最终角度 */
}

.popup-body {
    /* 弹窗主体内容样式 */
    padding: 20px; /* 内边距设置 */
    text-align: center; /* 文本居中对齐 */
}

.popup-options {
    /* 弹窗选项区域样式 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 内容居中对齐 */
    gap: 20px; /* 按钮之间的间距 */
    margin-top: 20px; /* 与上方内容的间距 */
}

#nextLevelBtn, #stayLevelBtn {
    /* 按钮的样式 */
    background: linear-gradient(90deg, #ffe066 60%, #ffd700 100%); /* 渐变背景 */
    color: #23243a; /* 文本颜色 */
    border: none; /* 无边框 */
    border-radius: 8px; /* 圆角边框 */
    padding: 10px 20px; /* 内边距设置 */
    font-weight: bold; /* 加粗字体 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: transform 0.2s, box-shadow 0.2s; /* 过渡效果 */
}

#nextLevelBtn:hover, #stayLevelBtn:hover {
    /* 按钮悬停效果 */
    transform: translateY(-3px); /* 向上移动 */
    box-shadow: 0 6px 12px #ffe06688; /* 添加阴影效果 */
}

.popup-decoration {
    /* 弹窗装饰区域样式 */
    display: flex; /* 使用弹性布局 */
    justify-content: space-around; /* 内容均匀分布 */
    padding: 16px; /* 内边距设置 */
    background-color: rgba(35, 36, 58, 0.8); /* 背景色 */
}

.dot {
    /* 装饰豆子的通用样式 */
    width: 24px; /* 宽度 */
    height: 24px; /* 高度 */
    border-radius: 50%; /* 圆角实现圆形 */
    animation: bounce 1.5s infinite alternate; /* 跳动动画 */
}

.normal-dot {
    /* 普通豆子样式 */
    background-color: #f1c40f; /* 背景色 */
    animation-delay: 0.2s; /* 动画延迟 */
}

.super-dot {
    /* 超级豆子样式 */
    background-color: #ffe066; /* 背景色 */
    box-shadow: 0 0 10px #ffe066; /* 添加发光效果 */
    animation-delay: 0.6s; /* 动画延迟 */
}

.pacman-icon {
    /* 吃豆人图标样式 */
    width: 24px; /* 宽度 */
    height: 24px; /* 高度 */
    background-color: #ffe066; /* 背景色 */
    border-radius: 50%; /* 圆角实现圆形 */
    clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 75%); /* 裁剪路径实现吃豆人形状 */
    animation: eat 1s infinite alternate; /* 吃豆动画 */
}

@keyframes bounce {
    /* 定义跳动动画 */
    from { transform: translateY(0); } /* 初始位置 */
    to { transform: translateY(-10px); } /* 最终位置 */
}

@keyframes eat {
    /* 定义吃豆动画 */
    from { 
        clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 75%); 
        /* 初始形状：张开的嘴 */
    }
    to { 
        clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%, 0 0%); 
        /* 最终形状：闭合的嘴 */
    }
}
/* 关卡完成弹窗 */
.popup {
    /* 弹窗的定位和大小设置 */
    position: fixed; /* 固定定位，使弹窗相对于浏览器窗口定位 */
    top: 0; /* 位于窗口顶部 */
    left: 0; /* 位于窗口左侧 */
    width: 100%; /* 宽度为窗口的100% */
    height: 100%; /* 高度为窗口的100% */
    background-color: rgba(0, 0, 0, 0.7); /* 半透明黑色背景，增强弹窗的突出效果 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中对齐内容 */
    align-items: center; /* 垂直居中对齐内容 */
    z-index: 1000; /* 设置层叠顺序，使弹窗位于顶部 */
}

.popup.hidden {
    /* 隐藏弹窗的样式 */
    display: none; /* 隐藏元素 */
}

.popup-content {
    /* 弹窗内容区域的样式 */
    background: linear-gradient(135deg, #23243a 60%, #34495e 100%); /* 渐变背景色 */
    border-radius: 16px; /* 圆角边框 */
    border: 4px solid #ffe066; /* 边框样式：宽度、样式和颜色 */
    box-shadow: 0 0 30px #ffe066; /* 添加阴影效果：位置、模糊半径和颜色 */
    overflow: hidden; /* 隐藏超出内容区域的部分 */
    width: 400px; /* 宽度设置 */
    max-width: 90%; /* 最大宽度限制，适应不同屏幕尺寸 */
    animation: popupAnim 0.5s; /* 应用弹窗动画 */
}

@keyframes popupAnim {
    /* 定义弹窗动画 */
    from { transform: scale(0.7); opacity: 0; } /* 初始状态：缩小且透明 */
    to { transform: scale(1); opacity: 1; } /* 最终状态：正常大小且不透明 */
}

.popup-header {
    /* 弹窗头部样式 */
    background: linear-gradient(90deg, #ffe066 60%, #ffd700 100%); /* 水平渐变背景 */
    padding: 16px; /* 内边距设置 */
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中对齐内容 */
    justify-content: center; /* 水平居中对齐内容 */
    gap: 12px; /* 元素之间的间距 */
}

.popup-emoji {
    /* 弹窗表情符号的样式 */
    animation: spin 2s infinite linear; /* 无限循环的旋转动画 */
}

@keyframes spin {
    /* 定义旋转动画 */
    from { transform: rotate(0deg); } /* 初始角度 */
    to { transform: rotate(360deg); } /* 最终角度 */
}

.popup-body {
    /* 弹窗主体内容样式 */
    padding: 20px; /* 内边距设置 */
    text-align: center; /* 文本居中对齐 */
}

.popup-options {
    /* 弹窗选项区域样式 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 内容居中对齐 */
    gap: 20px; /* 按钮之间的间距 */
    margin-top: 20px; /* 与上方内容的间距 */
}

#nextLevelBtn, #stayLevelBtn {
    /* 按钮的样式 */
    background: linear-gradient(90deg, #ffe066 60%, #ffd700 100%); /* 渐变背景 */
    color: #23243a; /* 文本颜色 */
    border: none; /* 无边框 */
    border-radius: 8px; /* 圆角边框 */
    padding: 10px 20px; /* 内边距设置 */
    font-weight: bold; /* 加粗字体 */
    cursor: pointer; /* 鼠标指针样式 */
    transition: transform 0.2s, box-shadow 0.2s; /* 过渡效果 */
}

#nextLevelBtn:hover, #stayLevelBtn:hover {
    /* 按钮悬停效果 */
    transform: translateY(-3px); /* 向上移动 */
    box-shadow: 0 6px 12px #ffe06688; /* 添加阴影效果 */
}

.popup-decoration {
    /* 弹窗装饰区域样式 */
    display: flex; /* 使用弹性布局 */
    justify-content: space-around; /* 内容均匀分布 */
    padding: 16px; /* 内边距设置 */
    background-color: rgba(35, 36, 58, 0.8); /* 背景色 */
}

.dot {
    /* 装饰豆子的通用样式 */
    width: 24px; /* 宽度 */
    height: 24px; /* 高度 */
    border-radius: 50%; /* 圆角实现圆形 */
    animation: bounce 1.5s infinite alternate; /* 跳动动画 */
}

.normal-dot {
    /* 普通豆子样式 */
    background-color: #f1c40f; /* 背景色 */
    animation-delay: 0.2s; /* 动画延迟 */
}

.super-dot {
    /* 超级豆子样式 */
    background-color: #ffe066; /* 背景色 */
    box-shadow: 0 0 10px #ffe066; /* 添加发光效果 */
    animation-delay: 0.6s; /* 动画延迟 */
}

.pacman-icon {
    /* 吃豆人图标样式 */
    width: 24px; /* 宽度 */
    height: 24px; /* 高度 */
    background-color: #ffe066; /* 背景色 */
    border-radius: 50%; /* 圆角实现圆形 */
    clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 75%); /* 裁剪路径实现吃豆人形状 */
    animation: eat 1s infinite alternate; /* 吃豆动画 */
}

@keyframes bounce {
    /* 定义跳动动画 */
    from { transform: translateY(0); } /* 初始位置 */
    to { transform: translateY(-10px); } /* 最终位置 */
}

@keyframes eat {
    /* 定义吃豆动画 */
    from { 
        clip-path: polygon(0 0, 100% 0, 100% 75%, 75% 100%, 0 75%); 
        /* 初始形状：张开的嘴 */
    }
    to { 
        clip-path: polygon(0 0, 100% 0, 100% 0%, 0 100%, 0 0%); 
        /* 最终形状：闭合的嘴 */
    }
}